//生态价值核算
<template>
  <a-layout>
    <a-layout-content>
      <!-- 选择核算项目 -->
      <!-- <div class="content-card"> -->
      <a-card title="生态价值核算系统" style="min-height: 840px; width: 405px">
        <a-form layout="vertical">
          <a-form-item label="选择核算项目">
            <a-select
              @change="handleProjectChange"
              style="width: 270px"
              placeholder="请选择核算项目"
            >
              <a-select-option value="物质供给">物质供给</a-select-option>
              <a-select-option value="文化服务">文化服务</a-select-option>
              <a-select-option value="调节服务">调节服务</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>
      <!-- </div> -->

      <!-- 数据录入页面 -->
      <div v-if="selectedProject === '物质供给'" class="content-carda">
        <h3>物质供给</h3>
        <a-form layout="vertical">
          <a-form-item label="产品类型">
            <a-select
              @change="handleProvisionChange"
              style="width: 270px"
              placeholder="请选择产品类型"
            >
              <a-select-option value="绿色电力">绿色电力</a-select-option>
              <a-select-option value="农产品">农产品</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="实物量">
            <a-input
              v-model="provisionData.quantity"
              style="width: 270px"
              placeholder="请输入实物量"
            />
          </a-form-item>
          <a-form-item label="市场价格">
            <a-input
              v-model="provisionData.marketPrice"
              style="width: 270px"
              placeholder="请输入市场价格"
            />
          </a-form-item>
          <a-button type="primary" @click="calculateProvisionValue"
            >计算物质供给价值</a-button
          >
        </a-form>
      </div>

      <div v-if="selectedProject === '文化服务'" class="content-carda">
        <h3>文化服务</h3>
        <a-form layout="vertical">
          <a-form-item label="景区名称">
            <a-input
              v-model="culturalData.touristAttraction"
              placeholder="请输入景区名称"
              style="width: 270px"
            />
          </a-form-item>
          <a-form-item label="游客年旅游总人次">
            <a-input
              v-model="culturalData.visitorCount"
              placeholder="请输入游客年旅游总人次"
              style="width: 270px"
            />
          </a-form-item>
          <a-form-item label="直接费用">
            <a-input
              v-model="culturalData.directCost"
              placeholder="请输入直接费用"
              style="width: 270px"
            />
          </a-form-item>
          <a-form-item label="间接费用">
            <a-input
              v-model="culturalData.indirectCost"
              placeholder="请输入间接费用"
              style="width: 270px"
            />
          </a-form-item>
          <a-button type="primary" @click="calculateCulturalValue"
            >计算文化服务价值</a-button
          >
        </a-form>
      </div>

      <div v-if="selectedProject === '调节服务'" class="content-carda">
        <h3>调节服务</h3>
        <a-form layout="vertical">
          <a-form-item label="服务类型">
            <a-select
              @change="handleServiceTypeChange"
              style="width: 270px"
              placeholder="请选择调节服务类型"
            >
              <a-select-option value="空气调节">空气调节</a-select-option>
              <a-select-option value="水调节">水调节</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 空气调节 -->
          <div v-if="regulatingData.serviceType === '空气调节'">
            <a-form-item label="空气质量改善量 (单位: 吨/年)">
              <a-input
                v-model="regulatingData.airImprovement"
                placeholder="请输入空气质量改善量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input
                v-model="regulatingData.facilityCost"
                placeholder="请输入替代设施成本"
                style="width: 270px"
              />
            </a-form-item>
          </div>

          <!-- 水调节 -->
          <div v-if="regulatingData.serviceType === '水调节'">
            <a-form-item label="水源涵养量 (单位: 立方米)">
              <a-input
                v-model="regulatingData.waterQuantity"
                placeholder="请输入水源涵养量"
                style="width: 270px"
              />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input
                v-model="regulatingData.facilityCost"
                placeholder="请输入替代设施成本"
                style="width: 270px"
              />
            </a-form-item>
          </div>

          <a-button type="primary" @click="calculateRegulatingValue"
            >计算调节服务价值</a-button
          >
        </a-form>
      </div>

      <!-- 核算结果页面 -->
      <div v-if="showResult" class="content-card">
        <h3>核算结果</h3>
        <p>物质供给总价值: {{ provisionValue }} 元</p>
        <p>文化服务总价值: {{ culturalValue }} 元</p>
        <p>调节服务总价值: {{ regulatingValue }} 元</p>
        <p>总价值: {{ totalValue }} 元</p>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";

// 选择的核算项目
const selectedProject = ref("物质供给");

// 物质供给数据
const provisionData = ref({
  productType: "",
  quantity: null, // 默认值设置为空
  marketPrice: null, // 默认值设置为空
});

// 文化服务数据
const culturalData = ref({
  touristAttraction: "",
  visitorCount: null, // 默认值设置为空
  directCost: null, // 默认值设置为空
  indirectCost: null, // 默认值设置为空
});

// 调节服务数据
const regulatingData = ref({
  serviceType: "",
  waterQuantity: null, // 默认值设置为空
  airImprovement: null, // 默认值设置为空
  facilityCost: null, // 默认值设置为空
});

// 核算结果
const provisionValue = ref(0);
const culturalValue = ref(0);
const regulatingValue = ref(0);
const totalValue = ref(0);
const showResult = ref(false);

// 使用 @change 来手动设置选择的项目
const handleProjectChange = (value) => {
  selectedProject.value = value;
};

// 手动处理物质供给产品类型的变化
const handleProvisionChange = (value) => {
  provisionData.value.productType = value;
};

// 处理调节服务类型变化
const handleServiceTypeChange = (value) => {
  regulatingData.value.serviceType = value;
};

// 计算物质供给价值
const calculateProvisionValue = () => {
  if (provisionData.value.quantity && provisionData.value.marketPrice) {
    provisionValue.value = provisionData.value.quantity * provisionData.value.marketPrice;
  }
  updateTotalValue();
};

// 计算文化服务价值
const calculateCulturalValue = () => {
  if (culturalData.value.directCost && culturalData.value.indirectCost) {
    culturalValue.value = culturalData.value.directCost + culturalData.value.indirectCost;
  }
  updateTotalValue();
};

// 计算调节服务价值
const calculateRegulatingValue = () => {
  if (
    regulatingData.value.serviceType === "空气调节" &&
    regulatingData.value.airImprovement &&
    regulatingData.value.facilityCost
  ) {
    regulatingValue.value =
      regulatingData.value.airImprovement * regulatingData.value.facilityCost;
  } else if (
    regulatingData.value.serviceType === "水调节" &&
    regulatingData.value.waterQuantity &&
    regulatingData.value.facilityCost
  ) {
    regulatingValue.value =
      regulatingData.value.waterQuantity * regulatingData.value.facilityCost;
  }
  updateTotalValue();
};

// 更新总价值
const updateTotalValue = () => {
  totalValue.value = provisionValue.value + culturalValue.value + regulatingValue.value;
  showResult.value = true;
};
</script>

<style scoped>
.ant-layout-content {
  display: flex;
}

.content-card {
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* width: 28%; */
}
.content-carda {
  /* margin-bottom: 24px; */
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 75%;
  margin-left: 10px;
}
a-form-item {
  margin-bottom: 16px;
}

a-button {
  margin-top: 16px;
}
</style>
